<template>
  <div 
    :class="[
      'bx-skeleton',
      'bx-glass',
      {
        'bx-skeleton--animated': animated,
        'bx-skeleton--round': round,
        'bx-skeleton--circle': variant === 'circle',
        'bx-skeleton--rect': variant === 'rect'
      }
    ]"
    :style="skeletonStyle"
  >
    <template v-if="!loading">
      <slot></slot>
    </template>
    <template v-else>
      <div v-if="variant === 'image'" class="bx-skeleton__image"></div>
      <div v-else-if="variant === 'avatar'" class="bx-skeleton__avatar"></div>
      <div v-else-if="variant === 'text'" class="bx-skeleton__text"></div>
      <div v-else-if="variant === 'paragraph'" class="bx-skeleton__paragraph">
        <div v-for="i in rows" :key="i" class="bx-skeleton__paragraph-line"></div>
      </div>
      <div v-else class="bx-skeleton__default"></div>
    </template>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'BxSkeleton',
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    animated: {
      type: Boolean,
      default: true
    },
    round: {
      type: Boolean,
      default: false
    },
    variant: {
      type: String,
      default: 'default',
      validator: (value) => ['default', 'text', 'paragraph', 'image', 'avatar', 'circle', 'rect'].includes(value)
    },
    width: {
      type: [String, Number],
      default: 'auto'
    },
    height: {
      type: [String, Number],
      default: 'auto'
    },
    rows: {
      type: Number,
      default: 3
    }
  },
  setup(props) {
    const skeletonStyle = computed(() => ({
      width: typeof props.width === 'number' ? `${props.width}px` : props.width,
      height: typeof props.height === 'number' ? `${props.height}px` : props.height
    }))

    return {
      skeletonStyle
    }
  }
}
</script>

<style scoped>
.bx-skeleton {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--bx-radius-medium);
  overflow: hidden;
  position: relative;
}

.bx-skeleton--animated::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  animation: bx-skeleton-loading 1.5s infinite;
}

.bx-skeleton--round {
  border-radius: 9999px;
}

.bx-skeleton--circle {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.bx-skeleton--rect {
  border-radius: var(--bx-radius-small);
}

.bx-skeleton__image {
  width: 100%;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.15);
}

.bx-skeleton__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
}

.bx-skeleton__text {
  width: 100%;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--bx-radius-small);
}

.bx-skeleton__paragraph {
  width: 100%;
}

.bx-skeleton__paragraph-line {
  height: 14px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--bx-radius-small);
  margin-bottom: 8px;
}

.bx-skeleton__paragraph-line:last-child {
  width: 60%;
}

.bx-skeleton__default {
  width: 100%;
  height: 100%;
  min-height: 20px;
  background-color: rgba(255, 255, 255, 0.15);
}

@keyframes bx-skeleton-loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
</style>

